export const wave = function (ctx, oRange, canvas, w){
    var tid;
    var canvasColor;
    if(oRange < 51) {
      canvasColor = '#6cb92c'
    } else if(oRange > 80) {
      canvasColor = '#ff5252'
    } else {
      canvasColor = '#ffb152'
    }
    var M = Math;
    var Sin = M.sin;
    var Cos = M.cos;
    var Sqrt = M.sqrt;
    var Pow = M.pow;
    var PI = M.PI;
    var oW =  w;
    var oH =  w;
    // 线宽
    var lineWidth = 1;
    // 大半径
    var r = (oW / 2);
    var cR = r - 2 * lineWidth;
    // 水波动画初始参数
    var axisLength = 2 * r - 16 * lineWidth;  // Sin 图形长度
    var unit = axisLength / 9; // 波浪宽
    var range = .4 // 浪幅
    var nowrange = range;
    var xoffset = 8 * lineWidth; // x 轴偏移量
    
    var data = ~~(oRange) / 100;   // 数据量
    
    var sp = 0; // 周期偏移量
    var nowdata = 0;
    var waveupsp = 0.006; // 水波上涨速度
    // 圆动画初始参数
    var arcStack = [];  // 圆栈
    var bR = r - 8 * lineWidth;
    var soffset = -(PI / 2); // 圆动画起始位置
    var circleLock = true; // 起始动画锁
    // 获取圆动画轨迹点集
    for (var i = soffset; i < soffset + 2 * PI; i += 1 / (8 * PI)) {
      arcStack.push([
        r + bR * Cos(i),
        r + bR * Sin(i)
      ])
    }
    // 圆起始点
    var cStartPoint = arcStack.shift();
    ctx.moveTo(cStartPoint[0], cStartPoint[1]);
    // 开始渲染
    render();
    function drawSine() {
      ctx.beginPath();
      ctx.save();
      var Stack = []; // 记录起始点和终点坐标
      for (var i = xoffset; i <= xoffset + axisLength; i += 20 / axisLength) {
        var x = sp + (xoffset + i) / unit;
        var y = Sin(x) * nowrange;
        var dx = i;
        var dy = 2 * cR * (1.15 - nowdata)  + (r - cR) - (unit * y);
        ctx.lineTo(dx, dy);
        Stack.push([dx, dy])
      }
      // 获取初始点和结束点
      var startP = Stack[0]
      var endP = Stack[Stack.length - 1]
      ctx.lineTo(xoffset + axisLength, oW);
      ctx.lineTo(xoffset, oW);
      ctx.lineTo(startP[0], startP[1])
      ctx.fillStyle = canvasColor;
  
      ctx.fill();
      ctx.restore();
    }
    function drawText() {
      ctx.globalCompositeOperation = 'source-over';
      var size = 0.4 * cR;
      ctx.font = 'bold ' + size + 'px Microsoft Yahei';
      var number = (nowdata.toFixed(2) * 100).toFixed(0);
      var txt = number+ '%';
      var fonty = r + size / 2;
      var fontx = r - size * 0.8;
      
      if (number >= 50)
      {
        ctx.fillStyle = "#FFFFFF";
      }
      else{
        ctx.fillStyle = canvasColor;
      }
      ctx.textAlign = 'center';
      ctx.fillText(txt, r + 5, r + 10)
    }
    //灰色圆圈
    function grayCircle() {
      ctx.beginPath();
      ctx.lineWidth = 1;
      ctx.strokeStyle = canvasColor;
      ctx.arc(r, r, cR - 8, 0, 2 * Math.PI);
      ctx.stroke();
      ctx.restore();
      ctx.beginPath();
    }
    //裁剪中间水圈
    function clipCircle() {
      ctx.beginPath();
      ctx.arc(r, r, cR - 10, 0, 2 * Math.PI, false);
      ctx.clip();
    }
    //渲染canvas
    function render() {
      /* #ifdef H5 */   
      cancelAnimationFrame(tid);
      /* #endif */
      /* #ifdef MP-WEIXIN */
      canvas.cancelAnimationFrame(tid)
      /* #endif */
      ctx.clearRect(0, 0, oW, oH);
      //灰色圆圈  
      grayCircle();
      //裁剪中间水圈  
      clipCircle();
      if ((data - nowdata) > 0) {
        nowdata += waveupsp;
      }
      if ((data - nowdata) < 0) {
        nowdata -= waveupsp
      }
      sp += 0.07;
      // 开始水波动画
      drawSine();
      // 写字
      drawText();
      
      // tid = doAnimationFrame(render);
       /* #ifdef H5 */      
      ctx.draw();
       tid = requestAnimationFrame(render);
      /* #endif */
      /* #ifdef MP-WEIXIN */
      tid =  canvas.requestAnimationFrame(render)
      /* #endif */
    }
  }